<template>
  <!-- 导航栏 -->
  <van-nav-bar
    title="充值界面"
    left-text="返回"
    left-arrow
    @click-left="back"
  />

  <!-- 表单结构 -->
  <van-form label-width="7em" @submit="submit">
    <van-cell-group inset>
      <van-field 
        v-model="business.money"
        label="当前余额"
        placeholder="当前余额"
        readonly
      />

      <van-field
        v-model="money"
        name="money"
        label="充值金额数(￥)"
        placeholder="请输入充值的金额"
        :rule="[{required: true, message: '请输入充值金额'}, {pattern:/[1-9]|[1-9]\d*/, message: '你填写的充值金额有误'}]"
      />

      <van-field name="type" label="充值方式">
        <template #input>
          <van-radio-group v-model="type" direction="horizontal">
            <van-radio name="wx">微信支付</van-radio>
            <van-radio name="zfb">支付宝</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          立即充值
        </van-button>
      </div>


    </van-cell-group>
  </van-form>



</template>

<script setup>
  const {proxy} = getCurrentInstance()

  let business = proxy.$cookies.get('business') ? proxy.$cookies.get('business') : {}
  business = reactive(business)

  let money = ref('1')
  let type = ref('zfb')

  const back = () => proxy.$router.go(-1)

  const submit = (values) => {
    //组装数据
    var query = {
      money: values.money,
      type: values.type
    }

    proxy.$router.push({
      path: '/business/confirm',
      query: query
    })
  }
</script>